<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>骰子布局</title>
    <style>
        .nav {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
        }

        /* 圆 */
        .circle {
            width: 20px;
            height: 20px;
            margin: 5px;
            border-radius: 100%;
            background-color: black;
        }

        /* 空白 */
        #empty {
            background-color: #fff;
        }

        /* 红框 */
        .items {
            width: 100px;
            height: 100px;
            margin: 10px;
            border: 1px solid red;
        }

        /* 第一个 */
        #item1 {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        /* 第二个 */
        #item2 {
            display: flex;
            justify-content: center;
            flex-direction: column;
            align-items: center;
        }

        #item2 .circle {
            margin: 10px;
        }

        /* 第三个 */
        #item3 {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        #item3>div {
            transform: rotate(135deg);
        }

        #item3 .circle {
            margin: 15px;
        }

        /* 第四个 */
        #item4 {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        #item4 #left,
        #item4 #right {
            width: 50%;
            flex-grow: 1;
        }

        #item4 .circle {
            margin: 20px auto;
        }

        /* 第五个 */
        #item5 {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        #item5 .circle {
            margin: 25px auto;
        }

        #item5 #left,
        #item5 #right,
        #item5 #center {
            margin: 5px;
        }

        /* 第六个 */
        #item6 {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        #item6 .circle {
            margin: 10px;
        }

        /* 第七个 */
        #item7 {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        #item7 .circle {
            margin: 10px auto;
        }

        #item7 #left,
        #item7 #right,
        #item7 #center {
            margin: 5px;
        }

        /* 第八个 */
        #item8 {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        #item8 .circle {
            margin: 10px auto;
        }

        #item8 #left,
        #item8 #right,
        #item8 #center {
            margin: 5px;
        }

        /* 第九个 */
        #item9 {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        #item9 .circle {
            margin: 10px auto;
        }

        #item9 #left,
        #item9 #right,
        #item9 #center {
            margin: 5px;
        }
    </style>
</head>

<body>
    <div class="nav">
        <div class="items" id="item1">
            <div class="circle"></div>
        </div>

        <div class="items" id="item2">
            <div class="circle"></div>
            <div class="circle"></div>
        </div>

        <div class="items" id="item3">
            <div>
                <div class="circle"></div>
                <div class="circle"></div>
                <div class="circle"></div>
            </div>
        </div>

        <div class="items" id="item4">
            <div id="left">
                <div class="circle"></div>
                <div class="circle"></div>
            </div>

            <div id="right">
                <div class="circle"></div>
                <div class="circle"></div>
            </div>
        </div>

        <div class="items" id="item5">
            <div id="left">
                <div class="circle"></div>
                <div class="circle"></div>
            </div>

            <div id="center">
                <div class="circle"></div>
            </div>

            <div id="right">
                <div class="circle"></div>
                <div class="circle"></div>
            </div>
        </div>

        <div class="items" id="item6">
            <div id="left">
                <div class="circle"></div>
                <div class="circle"></div>
                <div class="circle"></div>
            </div>

            <div id="right">
                <div class="circle"></div>
                <div class="circle"></div>
                <div class="circle"></div>
            </div>
        </div>

        <div class="items" id="item7">
            <div id="left">
                <div class="circle"></div>
                <div class="circle" id="empty"></div>
                <div class="circle"></div>
            </div>

            <div id="center">
                <div class="circle"></div>
                <div class="circle"></div>
                <div class="circle"></div>
            </div>

            <div id="right">
                <div class="circle"></div>
                <div class="circle" id="empty"></div>
                <div class="circle"></div>
            </div>
        </div>

        <div class="items" id="item8">
            <div id="left">
                <div class="circle"></div>
                <div class="circle"></div>
                <div class="circle"></div>
            </div>

            <div id="center">
                <div class="circle"></div>
                <div class="circle" id="empty"></div>
                <div class="circle"></div>
            </div>

            <div id="right">
                <div class="circle"></div>
                <div class="circle"></div>
                <div class="circle"></div>
            </div>
        </div>

        <div class="items" id="item9">
            <div id="left">
                <div class="circle"></div>
                <div class="circle"></div>
                <div class="circle"></div>
            </div>

            <div id="center">
                <div class="circle"></div>
                <div class="circle"></div>
                <div class="circle"></div>
            </div>

            <div id="right">
                <div class="circle"></div>
                <div class="circle"></div>
                <div class="circle"></div>
            </div>
        </div>
    </div>
</body>

</html>